<template>
	<view scroll-y="true" class="page" v-if="token">
		<view class="avatar-wrap fillx frsc" @click="openPage('/pages/mine/my-info/my-info')">
			<view class="avatar frcc">
				<u-image class="avatar-img" width="140" height="140" border-radius="50%" :src="data.head_portrait?data.head_portrait:'../../../static/logo_abf.png'" mode="aspectFill">
					<image class="order-message-img" src="../../../static/loading.gif" mode="scaleToFill" slot="loading"></image>
					<image class="order-message-img img_fail" src="../../../static/imgLoading_fail.png" mode="scaleToFill" slot="error"></image>
				</u-image>
			</view>
			<view class="avatar-other autoxy frss fw">
				<view class="name fillx">
					{{data.nickname}}
				</view>
				<!-- <view class="level-icon iconfont icon-huangguan fillx"></view> -->
			</view>
			<view class="avatar-arrow iconfont icon-arrow-right"></view>
		</view>
		
		<view class="property t-bb-u fillx">
			<view class="property-title fillx bsp10 my_t_b">
				我的资产
			</view>
			<view class="property-content fillx bsp10 frcc">
				<view class="property-content-balance fillx fccc bsp10">
					<text class="mr my_fs" @click.stop="isShowBalance=!isShowBalance">{{isShowBalance?'*****':user_money}}</text>
					<text>可用余额（元)</text>
				</view>
				<view class="property-content-arrow iconfont icon-arrow-right frsc" @click.stop="openPage('/pages/wallet/wallet-home/wallet-home')"></view>
			</view>
		</view>
		<view class="app fillx t-bb-u">
			<view class="app-title fillx bsp10 my_t_b">
				我的应用
			</view>
			<view class="app-content fillx frsc fw">
				<view class="app-item-wrap fcsc" v-for="item in appList" :key="item.name" @click="openPage(item.page)">
					<view class="app-img frcc" :class="item.class" :style="'color:'+item.color+';'"></view>
					<text class="app-name">{{item.name}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				data: {},
				user_money:0.00,
				isShowBalance:false,
				isPullDownRefresh:false,
				is_attest:0,
				order_appList: [{
						name: '待发货',
						picture: '../../../static/member_order_02.png'
					},
					{
						name: '待收货',
						picture: '../../../static/member_order_03.png'
					},
					{
						name: '已取消',
						picture: '../../../static/member_order_04.png'
					}
				],
				appList: [{
						name: '实名认证',
						class: 'iconfont iconshiming',
						color: '#d81e06',
						page: '/pages/certification/certification/certification',
					},
					{
						name: '授权证书',
						class: 'iconfont iconshouquanzhengshuchaxun',
						color: '#efb336',
						page: '/pages/mine/web-view/web-view',
					},
					{
						name: '店铺申请',
						class: 'iconfont iconshangdian',
						color: '#d81e06',
						page: '/pages/store/store-apply/store-apply',
					},
					{
						name: '预期股份',
						class: 'iconfont iconqiandai',
						color: '#ea9518',
						page: '/pages/mine/shares/shares',
					},
					{
						name: '客服中心',
						class: 'iconfont iconkefu',
						color: '#2aa515',
						page: '/pages/HM-chat/HM-chat',
					},
					{
						name: '公告',
						class: 'iconfont icongonggao',
						color: '#2aa515',
						page: '/pages/news/bulletin-list/bulletin-list',
					},
					/* {
						name: '常见问题',
						class: 'iconfont iconwenti',
						color: '#1296db',
						page: '',
					}, */
					{
						name: '设置',
						class: 'iconfont iconshezhi',
						color: '#c0c0c0',
						page: '/pages/mine/setting/setting',
					},
					/* {name:'查询真伪'}, */
					/* {
						name: '授权证书',
						page: '/pages/mine/web-view/web-view',
						picture: '../../../static/mine_04.png'
					},
					 {
						 name: '余额互转',
						 page: '/pages/mine/transfer-id/transfer-id',
					 }*/
					/* {name:'我的共享店后台'}, */

					/* {
						name: '古宝下载',
						page: '/pages/web-view/web-view?url=https%3A%2F%2Fwww.pgyer.com%2Fhshv',
						picture: '../../../static/mine_06.png'
					}, */
				],
				
			}
		},
		methods: {
			...mapMutations(['getNetworkType', 'vuexRequest', 'setCode', 'setChatMsgNum']),
			openPage(url) {
				if(this.token){
					if(url === ''){
						uni.showToast({
							title: '功能在完善中，暂未开放',
							icon: 'none'
						})
					}else if(url == '/pages/mine/web-view/web-view' && this.is_attest == 0){
						uni.showModal({
							title: '提示',
							content: '需要实名认证后才能查看授权证书？',
							success: (res) => {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/certification/certification/certification'
									});
								} 
							}
						});
						return !1
					}
					if(url == '/pages/mine/shares/shares' && this.is_attest == 0){
						uni.showModal({
							title: '提示',
							content: '需要实名认证后才能查看我的股份？',
							success: (res) => {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/certification/certification/certification'
									});
								} 
							}
						});
						return !1
					}
					uni.navigateTo({
						url: url
					});
				}else{
					uni.navigateTo({
						url: '/pages/login/login/login'
					});
				}
				
			},
			getMemberInfo() {
				this.vuexRequest({
					url: '/api/addons/execute?route=member/info&addon=o-s-mall-dist&access-token=' + this.token,
					method: 'GET',
					data: {},
					success: (res) => {
						console.log(res)
						this.$set(this.data, 'id', res.data.data.id)
						this.$set(this.data, 'username', res.data.data.username)
						this.$set(this.data, 'nickname', res.data.data.nickname)
						this.$set(this.data, 'head_portrait', res.data.data.head_portrait)
						this.user_money=res.data.data.user_money
						this.is_attest = res.data.data.agent_info.is_attest
						if(this.isPullDownRefresh){
							uni.stopPullDownRefresh()
							this.isPullDownRefresh=false
						}
					},
					fail: (err) => {
						//console.log(err)
					},
				})
			},
		},
		computed: {
			...mapState(['token', 'SystemInfo', 'chatMsgNum'])
		},
		onShow() {
			//因为无法完全监听tabbar点击事件，用onShow来监听登录状态
			//当未登录时switchTab跳回dealer页面再跳转到login登录，
			//这样的做法是保证login页面返回是dealer
			if (!this.token) {
				uni.switchTab({
					url: '/pages/tabbar/myPlace/dealer',
					success: () => {
						uni.navigateTo({
							url: '/pages/login/login/login'
						})
					}
				})
			} else {
				this.getMemberInfo()
			}
		},
		onPullDownRefresh() {
			this.isPullDownRefresh=true
			this.getMemberInfo()
		}
	}
</script>

<style scoped>
	/*-------------本页面统一的样式-------------*/
	.my_t_b {
		font-weight: bold;
	}
	.my_fs{
		font-size: 40rpx;
	}
	/*-----------以上为本页面统一的样式-----------*/
	.page {
		
		background-color: #f8f8f8;
	}

	.avatar-wrap {
		box-sizing: border-box;
		padding: 40rpx;
		background-color: #e4475a;
		position: relative;
	}

	.avatar {
		position: relative;
		box-sizing: border-box;
		width: 138rpx;
		height: 138rpx;
		border-radius: 50%;
		background-color: #ffffff;
		margin-right: 10px;
		box-shadow: 0 20rpx 50rpx -10rpx rgba(0, 0, 0, .8);
	}

	.avatar-img {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
	}

	.avatar-other {
		font-size: 18px;
		font-weight: normal;
		color: #ffffff;
	}

	.avatar-arrow {
		position: absolute;
		top: 50%;
		right: 40rpx;
		transform: translateY(-50%);
		font-size: 30rpx;
		color: #fffdfd;
	}

	.level {
		font-size: 15px;
		margin-top: 10px;
	}

	.level-icon {
		padding: 0;
		font-size: 40rpx;
		line-height: 40rpx;
		color: #2ddf26;
	}

	.asdasd {
		padding: 10px 0;
		background-color: #f8f8f8;
	}

	.order-title {
		position: relative;
	}

	.order-title-skip {
		font-size: 14px;
		font-weight: normal;
		color: #b9b9b9;
		position: absolute;
		top: 50%;
		right: 10px;
		transform: translateY(-50%);
	}

	.order-app {
		box-sizing: border-box;
		padding: 10px 0;
	}

	.property-content {
		padding: 10px;
		position: relative;
		
	}

	.property-content-withdraw-text {
		padding: 5px 10px;
		border: 2px solid #d7d7d7;
		border-radius: 2vw;
		/* box-shadow: 0 5px 15px -5px #e4475a; */
	}

	.property-content-balance {
		padding: 20rpx 0;
		background-color: #f0f0f0;
		border-radius: 3vw;
		color: rgba(0, 0, 0, .5);
	}

	.property-content-balance-eyes{
		margin-left: 10rpx;
		font-size: 36rpx;
		z-index: 10;
	}
	
	.property-content-arrow {
		flex-direction: row-reverse;
		position: absolute;
		top: 50%;
		right: 40rpx;
		transform: translateY(-50%);
		color: #e4475a;
		padding: 0;
		width: 200rpx;
		height: 100%;
	}

	.app-content {
		align-items: baseline;
		padding: 10px 0;
		justify-content: baseline;
	}

	.app-item-wrap {
		box-sizing: border-box;
		width: 25vw;
		height: auto;
		margin-bottom: 20rpx;
	}

	.app-img {
		width: 10vw;
		height: 10vw;
		font-size: 50rpx;
		border-radius: 3vw;
		margin-bottom: 10rpx;
		background-color: #f0f0f0;
	}

	.app-name {
		font-size: 24rpx;
		width: 120rpx;
		line-height: 32rpx;
		color: rgba(0, 0, 0, .5);
		text-align: center;
	}

	.other-division-item {
		font-size: 14px;
		padding: 15px 10px;
		position: relative;
	}
</style>
